<template>
  <div>
  <el-table
      :data="songList"
      stripe
      style="width: 100%">
    <el-table-column
        prop="songName"
        label="歌曲"
        width="500">
    </el-table-column>
    <el-table-column
        prop="playUrl"
        label="播放"
        width="100">
      <template slot-scope="scope">
        <a href="javascript:void(0)" @click="handlePlay(scope.row.songUrl)">
          <i class="el-icon-video-play"></i>
        </a>
<!--        <span style="margin-left: 10px">{{ scope.row.playUrl }}</span>-->
      </template>
    </el-table-column>
    <el-table-column
        prop="singer"
        label="歌手"
        width="180"
        show-overflow-tooltip=“true”>
    </el-table-column>
    <el-table-column
        prop="time"
        label="时长"
        >
    </el-table-column>
  </el-table>
  <audio class="audio" :src="audioUrl" controls></audio>
  </div>
</template>

<script>
export default {
  name: "MusicList",
  props:["songList"],
  data() {
    return {
      audioUrl:"",
    }
  },
  methods:{
    handlePlay(songUrl){
      this.audioUrl=songUrl;
    }
  }

}
</script>

<style scoped>
.el-icon-video-play{
  font-size: 22px;
  color: rgb(96,98,102);
}
.el-icon-video-play:hover{
  font-size: 22px;
  color: rgb(245, 132, 84);
}
audio{
  width: 70%;
  position:fixed;
  bottom:15px;
}


</style>